<template>
  <tx-table-column-text :label="label" v-if="show(showKey || field)">
    <template slot-scope="scope">
      <el-link
        type="primary"
        @click="handleClick(scope.row)"
        v-if="scope.row.$action == 'modify'"
      >
        {{ getCheckboxValues(scope.row).join(" ") }}
      </el-link>
      <div v-else>{{ getCheckboxValues(scope.row).join(" ") }}</div>
      <!-- -->
      <el-dialog
        title="队伍级别"
        :visible.sync="visible"
        width="500px"
        :before-close="handleClose"
        center
        append-to-body
      >
        <div class="jydw-source-level__content" v-loading="loading">
          <slot>
            <!-- <el-checkbox :indeterminate="scope.row.$isIndeterminate" v-model="scope.row.$checkAll" @change="handleCheckAllChange(scope.row)">全选</el-checkbox> -->
            <el-checkbox-group
              v-model="editRow.$checked"
              @change="handleCheckedCitiesChange(editRow)"
            >
              <div>
                <el-checkbox key="country" label="country">国家级</el-checkbox>
              </div>
              <div
                v-if="editRow?.$checked?.includes('country')"
                class="selectBox"
              >
                <el-checkbox key="province" label="province"
                  >自治区级</el-checkbox
                >
              </div>
              <div v-if="editRow?.$checked?.includes('province')">
                <el-checkbox key="city" label="city">盟市级</el-checkbox>
                <el-select
                  v-model="cityId"
                  @change="change(val, editRow, 'city', 'cityObjs')"
                  placeholder="请选择盟市"
                >
                  <el-option
                    v-for="items in cityObjs"
                    :key="items.id"
                    :label="items.name"
                    :value="items.id"
                  ></el-option>
                </el-select>
                <el-select
                  v-model="cityOrgId"
                  @change="change(val, editRow, 'cityOrgId', 'cityOrgObjs')"
                  placeholder="选择同步单位"
                >
                  <el-option
                    v-for="items in cityOrgObjs"
                    :key="items.id"
                    :label="items.name"
                    :value="items.id"
                  ></el-option>
                </el-select>
              </div>
              <div v-if="editRow?.$checked?.includes('city')">
                <el-checkbox key="county" label="county">旗县级</el-checkbox>
                <el-select
                  v-model="countyId"
                  @change="change(val, editRow, 'county')"
                  placeholder="请选择旗县"
                >
                  <el-option
                    v-for="items in countyObjs"
                    :key="items.id"
                    :label="items.name"
                    :value="items.id"
                  ></el-option>
                </el-select>
                <el-select
                  v-model="countyOrgId"
                  @change="change(val, editRow, 'countyOrgId')"
                  placeholder="选择同步单位"
                >
                  <el-option
                    v-for="items in countyOrgObjs"
                    :key="items.id"
                    :label="items.name"
                    :value="items.id"
                  ></el-option>
                </el-select>
              </div>
            </el-checkbox-group>
          </slot>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="handleClose(editRow)" :disabled="loading"
            >取消</el-button
          >
          <el-button
            type="primary"
            @click="handleConfirm(editRow)"
            :disabled="loading"
            >确定</el-button
          >
        </div>
      </el-dialog>
    </template>
  </tx-table-column-text>
</template>
<script>
import { objectMerge } from "@/utils";
import columnData from "./data.json";
import columnMixin from "./mixin.js";

// let data ={
// "$action":"view",
// "$checkAll":false,
// "$checked":Array(0),
// "$isIndeterminate":false,
// "$sourceLevel":undefined,
// "$visible":false,
// "adminType":17,
// "areaCode":"150000000000",
// "areaName":"内蒙古自治区",
// "city":"",
// "cityOrgId":"",
// "cityOrgName":"",
// "country":"86",
// "county":"",
// "countyOrgId":"",
// "countyOrgName":"",
// "createdBy":"15622226661",
// "createdTime":1690302132000,
// "csAdminLevel":"Province",
// "id":"1133554831147925504",
// "job":"信息员",
// "menuId":"1000000010",
// "menuName":"救援队伍",
// "menuPermission":"1000000010::",
// "name":"王1",
// "orgId":"dp-d0435cf4f867411099ae69f9a97026a2",
// "orgName":"救援队伍1",
// "pageType":"",
// "phone":"13433333334",
// "province":"",
// "sourceLevel":undefined,
// "sourceType":"消防救援队",
// "status":1,
// "superiorOrg":"救援队伍",
// "updatedBy":"15622226661",
// "workUnit":"救援队伍1",
// }

const checkOptions = ["country", "province", "city", "county"];
export default {
  mixins: [columnMixin],
  props: {
    label: {
      type: [String],
      default: "",
    },
    showKey: {
      type: [String],
      default: "",
    },
    field: {
      type: [String],
      default: "",
    },
    rules: {
      type: Object,
      default() {
        return {};
      },
    },
    content: {
      type: Object,
      default() {
        return {
          controller: null,
          props: {},
          columns: [],
        };
      },
    },
  },
  data() {
    return {
      columnData,
      loading: false,
      cityObjs: [],
      cityOrgObjs: [],
      countyObjs: [],
      countyOrgObjs: [],
      cityId: "",
      cityOrgId: "",
      countyId: "",
      countyOrgId: "",
      visible: false,
      editRow: {},
    };
  },
  components: {},
  watch: {
    cityId: function () {
      this.getOrgList(this.cityId, "cityOrgObjs");
      this.getList(this.cityId, "countyObjs", "countyId"); // 查询县列表
    },
    countyId: function () {
      this.getOrgList(this.countyId, "countyOrgObjs");
    },
  },
  mounted() {
    console.log("content", this.content);
  },
  computed: {},
  methods: {
    getCheckboxValues: (row) => {
      // 选择的checkbox值变成 text
      let values = [];
      if (row && row.sourceLevel?.country) values.push("国家级");
      if (row && row.sourceLevel?.province) values.push("自治区级");
      if (row && row.sourceLevel?.city) values.push("盟市级");
      if (row && row.sourceLevel?.county) values.push("旗县级");
      if (values.length == 0) values.push("请选择级别");
      return values;
    },
    getList(parId, obj, key) {
      // 获取市列表----------请求参数parId、 保存请求返回的list列表、 默认选择的select保存起来
      this.$api.CommonController.list(
        { body: { parId: parId || "150000000000" } },
        (res) => {
          if (res.code == 0) {
            this[obj] = res.data;
            this[key] = res?.data?.[0]["id"];
          }
        }
      );
    },
    getOrgList(parId, obj) {
      if (parId) {
        // 获取单位列表
        this.$api.OrgController.level({ body: { parId } }, (res) => {
          if (res.code == 0) {
            this[obj] = res.data;
          }
        });
      }
    },
    handleClick(row) {
      row.$sourceLevel = row.sourceLevel;
      this.visible = true;
      this.editRow = row;
      console.log(row.name);
    },
    handleCheckAllChange(row) {
      console.log("handleCheckAllChange", row.$checkAll);
      row.$checked = row.$checkAll ? checkOptions : [];
      row.$isIndeterminate = false;
    },
    handleCheckedCitiesChange(row) {
      this.getList("", "cityObjs", "cityId"); // 查询城市列表
      console.log(this.editRow, row);

      // let checkedCount = row.$checked.length;
      // row.$checkAll = checkedCount === checkOptions.length;
      // row.$isIndeterminate =
      //   checkedCount > 0 && checkedCount < checkOptions.length;
      // console.log(" row.$isIndeterminate", row.$isIndeterminate);
    },
    change(changeVal, row, key, obj) {
      // 当前改变的值、当前编辑的行、当前row中的key、当前下拉框的list数组值
      // 选择下拉
      this.editRow.sourceLevel[key] = changeVal;
      this.getOrgList(changeVal, obj);
    },
    handleConfirm(row) {
      row = this.editRow;
      console.log("checkedCities", row.$checked);
      console.log(row, this.editRow);
      row.sourceLevel = {};
      if (this.$in("country", row.$checked)) {
        row.sourceLevel.country = "86";
      }
      if (this.$in("province", row.$checked)) {
        row.sourceLevel.province = "150000000000";
      }
      if (this.$in("city", row.$checked)) {
        row.sourceLevel.city = this.cityId;
        row.sourceLevel.cityOrgId = this.cityOrgId;
      }
      if (this.$in("county", row.$checked)) {
        row.sourceLevel.county = this.countyId;
        row.sourceLevel.countyOrgId = this.countyOrgId;
      }
      this.visible = false;
      console.log("this.editRow", this.editRow);
    },
    handleClose(row) {
      row.sourceLevel = row.$sourceLevel;
      this.visible = false;
    },
  },
};
</script>

<style lang="scss">
.jydw-source-level {
  &__content {
    .el-input__inner {
      width: 160px;
    }
  }
}
.el-select {
  margin-left: 6px;
}
.el-checkbox-group {
  div {
    margin: 3px 0;
  }
}
</style>
